<template>
  <a-spin :spinning="!state.showForm" size="large" :tip="t('请稍后······')">
    <div class="login-container">
      <div class="login-box" v-show="state.showForm">
        <div class="title">{{ t("在线答题系统") }}</div>
        <div class="sub-title">{{ t("欢迎登录后台管理") }}</div>
        <a-form>
          <a-space direction="vertical" style="width: 100%" size="middle">
            <a-input
              v-model:value="loginForm.username"
              :placeholder="t('请输入用户名')"
            ></a-input>
            <a-input-password
              v-model:value="loginForm.password"
              :placeholder="t('请输入密码')"
              autocomplete="off"
            ></a-input-password>
          </a-space>
          <div class="operation">
            <a-checkbox v-model:checked="state.remember">{{
              t("记住密码")
            }}</a-checkbox>
            <a-button
              type="link"
              class="forget-pwd"
              @click="forgetPwdOpen = true"
              >{{ t("忘记密码") }}</a-button
            >
          </div>
          <a-button
            block
            type="primary"
            :loading="state.loading"
            @click="handleLogin"
            >{{ t("登录") }}</a-button
          >
        </a-form>
      </div>
    </div>
  </a-spin>
  <forget-pwd-modal
    :open="forgetPwdOpen"
    @cancel="forgetPwdOpen = false"
  ></forget-pwd-modal>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/user";
import { notification } from "ant-design-vue";
import { PASSWORD, REMEMBER_ME, USER_NAME } from "@/utils/storage/key";
import type { LoginParams } from "@/api/auth/typing";
import ForgetPwdModal from "./components/forget-pwd-modal.vue";
import md5 from "md5";
const { t } = useI18n();
const userStore = useUserStore();
const router = useRouter();

const loginForm = reactive<LoginParams>({
  username: localStorage.getItem(USER_NAME) || null,
  password: localStorage.getItem(PASSWORD) || null,
});
const state = reactive({
  loading: false,
  remember: localStorage.getItem(REMEMBER_ME) === "true",
  showForm: false,
});

// 加载背景图完成后显示登录表单
const img = new Image();
img.src = "/static/public/image/bg.png";
img.onload = () => {
  state.showForm = true;
};

// 忘记密码弹窗
const forgetPwdOpen = ref(false);

/**登录回调 */
const handleLogin = async () => {
  state.loading = true;
  const { success } = await userStore.login({
    username: loginForm.username,
    password: md5(loginForm.password),
  });
  if (success) {
    notification.success({
      message: t("欢迎！"),
      description: t("登录成功"),
    });
    if (state.remember) {
      localStorage.setItem(REMEMBER_ME, "true");
      localStorage.setItem(USER_NAME, loginForm.username);
      localStorage.setItem(PASSWORD, loginForm.password);
    } else {
      localStorage.removeItem(REMEMBER_ME);
      localStorage.removeItem(USER_NAME);
      localStorage.removeItem(PASSWORD);
    }
    const routes = router.getRoutes();
    const query: Record<string, any> = {
      path: routes.find((f) => !f.path.startsWith("/white-path")).path,
    };
    decodeURIComponent(location.search.slice(1))
      .split("&")
      .forEach((f) => {
        const [key, value] = f.split("=");
        query[key] = value;
      });
    router.push({ path: query["path"] });
  }
  state.loading = false;
};
</script>
<style lang="less" scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  background: url("/static/public/image/bg.png") no-repeat center center;
  background-size: cover;
}
.login-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: max-content;
  padding: 16px 32px;
  border-radius: 8px;
  background: linear-gradient(
    to bottom,
    #0094ff,
    #68c0ff,
    #a9dbff,
    #ffffff,
    #ffffff
  );
  box-shadow: 0 0 500px #0094ff;
  .title {
    color: @primary-color;
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: bold;
  }
  .sub-title {
    color: @primary-color;
    margin: 0 0 16px;
    font-size: 16px;
  }
  .operation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4px 8px 16px;
    .ant-checkbox-wrapper {
      color: @primary-color;
    }
    .forget-pwd {
      color: @primary-color;
    }
  }
}
</style>
